<template>
    <div v-if="tags?.length" class="render-tags">
        <el-tag
            v-for="(tag, i) in props.tags.slice(0, 6)"
            :key="tag.tagId || tag.Id || tag.id"
            effect="light"
            closable
            :type="tag.isDelete ? 'info' : ''"
            :size="props.size"
            :disable-transitions="false"
            @close="handleClose(tag, i)">
            {{ tag.tagName || tag.Name || tag.name }}
        </el-tag>
        <el-tag v-if="props.tags.length > 6" effect="light" @click="handleOpenMore" >
            ...
        </el-tag>
    </div>
</template>
<script setup>
const props = defineProps({
    tags: {
        type: Array,
        default: () => []
    },
    size: {
        type: String
    }
})
const emit = defineEmits(['update:tags', 'openMore', 'close']);

const handleClose = (tag, i) => {
    const updateValue = [...props.tags];
    updateValue.splice(i, 1);
    emit('update:tags', updateValue);
    emit('close');
};

/**
 * 打开更多
 */
const handleOpenMore = () => {
    emit('openMore')
}
</script>

<style lang="scss" scoped>
.render-tags {
    width: 100%;
    line-height: normal;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.el-tag {
    user-select: none;
    cursor: pointer;
    height: auto;
    line-height: normal;
    padding: 6px 12px;
    border-radius: 2px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 300;
    :deep(.el-tag__close) {
        margin-left: 14px;
    }
}
</style>
